<template>
	<view>
		<Nav title="上传" v-show="navShow" :leftIconColor="'#FFF'" @onClickRight="clickRight" />
		<view style="padding: 0 5%;" @click="fabCloseClick">
			<!-- 已用容量 {{(sizeToMb/1000).toFixed(2)}}MB / {{StorageByte}}MB -->
			已用容量 {{sizeToMb?sizeToMb : 0.0}}GB / {{ (StorageByte)}}GB
			<u-line-progress :percentage="progress" height="16"
				:active-color="progress>=90?'#d1100b':'#d1100b'"></u-line-progress>
			<!-- <u-line-progress></u-line-progress> -->
			<!-- <progress :percent="progress" stroke-width="3" show-info :active-color="progress>=90?'#d1100b':'#09BB07'" /> -->
		</view>
		<view class="pageRight" @click="fabCloseClick">
			<view class="empty" v-if="formArr.length == 0" style="margin-top: 150rpx;">
				<view class="title"
					style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<image src="../../static/upload.png" mode=""
						style="width: 200rpx;height: 200rpx;margin-bottom: 20rpx;" mode="aspectFit"></image>
					<text style="padding-bottom: 20rpx;">云端存储</text>
					<text>释放手机空间</text>
				</view>
				<!-- <button @click="toTakePic">去巡检</button> -->
			</view>
			<scroll-view v-else scroll-y="true" :style="{height: height+'px'}">
				<view class="list">
					<view v-for="val,vix in formArr" :key="val.Id">
						<view :class="val.upstate===3?'rightItem trbgt':'rightItem'">
							<view class="leftImage">
								<view v-if="val.imglist[0]" style="height: 100%;">
									<image v-if="val.imglist[0].Mtype==='image'" :src="val.imglist[0].Murl||''"
										class="cover"
										@click.stop="lookimg(val.imglist,val.Content,0,val.PropData,vix,val.imglist[0]||'')">
									</image>
									<view class="video" v-if="val.imglist[0].Mtype==='video'"
										@click.stop="lookimg(val.imglist,val.Content,0,val.PropData,vix,val.imglist[0]||'')">
										<uni-icons type="videocam-filled" size="30" color="#fff"></uni-icons>
									</view>
								</view>
							</view>
							<view class="center" @click="itemvalClick(val)">
								<view class="remark" v-for="item in val.PropData" :key="item.ControlName">
									{{item.ControlName}} : {{item.DefaultValue}}
								</view>
							</view>

							<view class="last">
								<uni-icons type="more-filled" size="30" color="#d1100a"
									@click="showPopup(val,vix, val.Id, val.ProjectId)"></uni-icons>
								<checkbox-group @change="itemvalClick(val)">
									<label>
										<checkbox :value="val.Id" :checked="checkedArr.includes(String(val.Id))" />
									</label>
								</checkbox-group>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-popup :show="show" @close="closepopup" mode="center" closeable @open="openpopup" :round="20"
			:closeOnClickOverlay="false" :zIndex="10078">
			<view style="width: 80vw;padding: 30px 0;">
				<view style="display: flex;align-items: center;padding: 20rpx;width: 100%;">
					<u-cell-group>
						<u-cell title="项目" :isLink="true" :value="entity.xmName||'选择项目'" arrow-direction="right"
							@click="clickXM">
						</u-cell>
						<u-cell title="任务" :isLink="true" :value="entity.rwName||'选择任务'" arrow-direction="right"
							@click="clickRW" :disabled="!entity.xmName">
						</u-cell>
					</u-cell-group>
				</view>
				<view style="padding: 0 40rpx;">
					<button type="primary" @click="modalconfirm">上传</button>
				</view>
			</view>
		</u-popup>
		<ImageView ref="ImageView" @setEdit="setEditObj" @close="imageClose" :parentObj=" { ...this }" :isShow="true">
		</ImageView>
		<videoView ref="videoView"></videoView>
		<!-- 项目组件 -->
		<listitem ref="listitem" @itemClick="itemClick"></listitem>
		<!-- 任务组件 -->
		<listitemRW ref="listitemRW" :xmId="entity.xmId" :xmName="entity.xmName" @itemClick="itemClickRW"
			@backXM="backXM">
		</listitemRW>
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<uni-popup-share title="操作" :bottomData="bottomData" @select="shareSelect"></uni-popup-share>
		</uni-popup>
		<uni-fab ref="fab" :pattern="pattern" :content="fabList" horizontal="right" vertical="bottom"
			direction="horizontal" @trigger="trigger" />
	</view>
</template>

<script>
	import Nav from '@/components/BackTabBar.vue'
	import tabBar from '@/components/tabBar.vue'
	import ImageView from '@/components/ImageView.vue'
	import videoView from '@/components/videoView.vue'
	// 项目组件
	import listitem from '@/components/listitem/listitem.vue'
	// 任务组件
	import listitemRW from '@/components/listitem/listitemRW.vue'
	import qianziyuSelect from '@/components/qianziyu-select/qianziyu-select.vue'
	import eliseAudio from '@/components/elise-audio/elise-audio.vue'
	import {
		mapActions
	} from 'vuex'
	export default {
		components: {
			eliseAudio,
			listitem,
			listitemRW,
			ImageView,
			qianziyuSelect,
			// BackTabBar,
			videoView,
			tabBar,
			Nav
		},
		onShow() {



			// 默认关闭浮动按钮弹出菜单
			this.$nextTick(function() {
				console.log('获取是否展开菜单了', this.$refs.fab.popMenu, this.$refs.fab.isShow)
				this.$refs.fab.popMenu = true
				this.$refs.fab.isShow = false
			})
			this.getUnreadTotal()
			this.getSize()
			this.getLocalFile()
			// 是否有编辑图片数据
			if (uni.getStorageSync('uploadImgList')) {
				let obj = JSON.parse(uni.getStorageSync('uploadImgList'))
				console.log('tool页面获取缓存好的图片列表谁', obj)
				console.log(this.formArr, '主列表');
				this.formArr[obj.vix].imglist = obj.content
				// this.$nextTick(() => {
				// 	this.$refs.ImageView.changeImgList(obj.content)
				// })
				uni.removeStorageSync('uploadImgList')
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res);
					// 可使用高度减去系统状态栏高度减去(自定义导航高度+任务选择高度)
					this.height = res.windowHeight - res.statusBarHeight - 86
				}
			})
		},
		onNavigationBarButtonTap(e) {
			console.log(e)
			uni.navigateTo({
				url: '/pages/user/user'
			})
			return true;
		},
		data() {
			return {
				userInfo: {},
				lookImglist: [],
				bottomData: [{
					icon: '/static/Btn-tu/Bian.png',
					text: '编辑',
					name: 'edit'
				}, {
					icon: '/static/Btn-tu/Shan.png',
					text: '删除',
					name: 'del'
				}],
				popupData: {},
				StorageByte: 0, // 最大容量
				StorageSize: 0, // 已使用容量
				list: ['待上传列表', '上传列表'],
				currentIndex: 0,
				entity: {
					xmName: "",
					xmId: "",
					rwName: "",
					rwId: "",
				},
				showflak: false,
				show: false,
				sort: '',
				checkbox: [],
				formArr: [],
				uplist: [],
				arrErr: [], //未完成的记录
				checkedArr: [], //复选框选中的值
				allChecked: false, //是否全选
				successArr: [],
				btnObject: {
					bg: '#fff',
					paddingR: '20',
					paddingL: '20',
					left: [],
					right: [{
						Name: '上传',
						type: 'warn',
						size: 'mini'
					}]
				},
				editObj: '',
				pattern: {
					buttonColor: '#d1100b',
					selectedColor: '#d1100b',
					icon: 'more-filled',
					iconShow: 'more'
				},
				fabList: [{
						iconPath: '/static/Bao1.png',
						selectedIconPath: '/static/Bao2.png',
						text: '上传',
						active: false
					},
					{
						iconPath: '/static/Shan1.png',
						selectedIconPath: '/static/Shan2.png',
						text: '删除',
						active: false
					},
					{
						iconPath: '/static/Xuan1.png',
						selectedIconPath: '/static/Xuan2.png',
						text: '全选',
						active: false
					}
				],
				height: 800,
				navShow: true
			}
		},
		watch: {
			show(a) {
				if (a) {
					uni.hideTabBar()
				} else {
					uni.showTabBar()
				}
			},
			checkedArr(n) {
				if (n.length > 0) {
					this.fabList[0].active = true
					this.fabList[1].active = true
				} else {
					this.fabList[0].active = false
					this.fabList[1].active = false
				}
			},
			allChecked(n) {
				if (n) this.fabList[2].active = true
				else this.fabList[2].active = false
			}
		},
		computed: {
			fileSize() {
				let num = 0
				this.formArr.filter(item => this.checkedArr.includes(item.Id)).forEach(item => {
					item.imglist.forEach(im => {
						num += im.FileSize || 0
					})
				})
				return num
			},
			sizeToMb() {
				let num
				if (this.userInfo.StorageByte && this.userInfo.ResidueMemory) {
					num = (parseFloat((this.userInfo.StorageByte - this.userInfo.ResidueMemory))).toFixed(1)
				} else {
					num = 0
				}

				return num
			},
			progress() {
				let StorageByte = this.userInfo.StorageByte //总数 
				let residueProgress = (this.userInfo.StorageByte - this.userInfo.ResidueMemory).toFixed(
					1) //总容量- 剩余容量  = 已用容量
				let resultProgress = (residueProgress / StorageByte) * 100 //已用除以总数 *100  换算百分比
				return resultProgress
			}
		},
		methods: {
			...mapActions(['getUnreadTotal']),
			// 点击页面任意一点关闭三个点弹窗
			fabCloseClick() {
				// 默认关闭浮动按钮弹出菜单
				this.$nextTick(function() {
					this.$refs.fab.popMenu = true
					this.$refs.fab.isShow = false
				})
			},
			imageClose() {
				this.navShow = true
			},
			shareSelect(e) {
				console.log('上传文件里点击编辑了', e, this.popupData)
				if (e.item.name == 'edit') {
					this.editLocalFile(this.popupData.val, this.popupData.vix)
				} else if (e.item.name == 'del') {
					this.delLocalFile(this.popupData.val)
				}
			},
			// 操作展示
			showPopup(val, vix, Id, ProjectId) {
				console.log('操作展示', val, vix, Id, ProjectId)
				this.popupData = {
					val,
					vix
				}
				this.$refs.share.open()
			},
			clickRight() {
				uni.navigateTo({
					url: '/pages/user/user'
				})
			},
			getSize() {
				this.$http('Base_Manage/Home/GetAppOperatorInfo').then(res => {
					if (res.Success) uni.setStorageSync('userInfo', res.Data)
					this.userInfo = uni.getStorageSync('userInfo')
					this.StorageSize = uni.getStorageSync('userInfo').StorageSize
					this.StorageByte = (uni.getStorageSync('userInfo').StorageByte).toFixed(1)
				})
			},
			// 浮动导航栏按钮点击事件
			trigger(e) {
				if (e.index == 0) this.upclick()
				else if (e.index == 1) this.delLocalFile()
				else if (e.index == 2) this.allChoose()
			},
			// 存储画图数据
			setEditObj(data) {
				console.log('存储画图数据', JSON.parse(this.editObj), data);
				if (data !== null) {
					uni.setStorageSync('uploadImgList', data)
				} else {
					uni.setStorageSync('uploadImgList', this.editObj)
				}

			},
			// 获取本地数据
			async getLocalFile() {

				if (uni.getStorageSync('fromdata')) {
					this.formArr = JSON.parse(uni.getStorageSync('fromdata'))
					console.log('获取本地数据列表上传', this.formArr);
					let newArr = []
					this.formArr.forEach(item => {
						newArr = newArr.concat(item.imglist.map(im => {
							return {
								...im,
								PropData: item.PropData,
								Content: item.Content,
								Id: item.Id
							}
						}))
					})
					this.lookImglist = newArr
				} else {
					this.formArr = []
				}
			},
			// 去拍照
			toTakePic() {
				uni.switchTab({
					url: '/pages/TakePict/TakePict'
				})
			},
			// 是否删除本地文件
			isDelLocalFile(e) {
				if (!e.del) {
					e.del = true
				} else {
					e.del = !e.del
				}
				return false
			},
			// 上传数据
			async uploadArr() {
				this.successArr.forEach(item => {
					item.MediumList = item.imglist
					item.IsEnjoy = false
				})
				let obj = {
					ProjectId: this.entity.xmId,
					TaskId: this.entity.rwId,
					TakeNotesList: this.successArr
				}

				console.log('上传图片数据------------', this.successArr, obj)
				await this.$http('Base_ProjectWork/Base_Project/SaveTaskPatrol', obj).then(res => {
					uni.hideLoading()
					if (res.Success) {
						console.log('SaveTaskPatrol借口是否成功', res)
						// item.upstate = 1 //提交完成后本次记录 整个记录上传状态 0待上传 1成功 2 失败
						// 保存成功数据提交
						//是否删除本地记录 
						var lists = JSON.parse(uni.getStorageSync('fromdata'))
						this.successArr.forEach(item => {
							var index = lists.findIndex(i => {
								return i.Id === item.Id
							})
							lists.splice(index, 1)
						})
						this.uplist = []
						uni.setStorageSync('fromdata', JSON.stringify(lists))
						console.log('获取最终存储后的formdata', JSON.parse(uni.getStorageSync('fromdata')))
						uni.showToast({
							title: '提交完成',
							icon: "none"
						});
						this.getSize()
					} else {
						console.log('打印上传错误', res, this.successArr)
						//提交失败 整个记录上传状态 0待上传 1成功 2 失败
						this.uplist.forEach(item => this.$set(item, 'upstate', 2))
						uni.showToast({
							icon: 'none',
							title: res.Msg
						})
						uni.hideLoading()
					}
				})
				this.formArr = JSON.parse(uni.getStorageSync('fromdata'))
			},
			async resetup(val) { //重新上传

				this.successArr = []
				uni.showLoading({
					title: '提交中,文件过多会较慢请稍等',
					mask: true
				})

				this.arrErr = []
				await this.rowsUp([val])
				await this.uploadArr()
			},
			sectionChange(index) {
				this.currentIndex = index;
			},
			// 任务返回项目
			backXM() {
				this.clickXM()
			},
			// 任务赋值
			itemClickRW(item) {
				console.log('任务组件回传', item)
				this.entity.rwName = item.Name
				this.entity.rwId = item.Id
				this.modalconfirm()
			},
			// 项目赋值
			itemClick(item) {
				console.log('项目组件传递过来的列表数据', item, this.entity)
				this.entity.xmName = item.Name
				this.entity.xmId = item.ProjectId ? item.ProjectId : item.Id
				this.clickRW()
			},
			// 点击任务
			clickRW() {
				this.$refs.listitemRW.open()
			},
			// 点击项目
			clickXM() {
				console.log('点击项目', )
				this.$refs.listitem.open()
			},
			// 选择项目任务弹窗上传
			modalconfirm() {
				console.log('开始上传了', this.entity, )
				if (!this.entity.xmId) return uni.showToast({
					icon: 'none',
					title: '请选择项目'
				})
				if (!this.entity.rwId) return uni.showToast({
					icon: 'none',
					title: '请选择任务'
				})
				this.show = false

				console.log('获取即将存储的额项目id和任务id', this.entity)
				uni.setStorageSync('entityProjectXmRwIdObj', this.entity)
				this.upupup()
				// this.current = 1
			},
			// 选择项目任务弹窗关闭
			closepopup() {
				this.show = false
			},
			// 选择项目任务弹窗开启
			openpopup() {
				this.show = true
			},
			async upupup() {
				// 上传完成浮动按钮关闭菜单
				this.$nextTick(function() {
					this.$refs.fab.popMenu = true
					this.$refs.fab.isShow = false
				})
				this.successArr = []
				uni.showLoading({
					title: '提交中,文件过多会较慢请稍等'
				})
				var arr = []
				console.log('打印最终提交准备上传的数据', this.formArr, this.checkedArr)

				this.formArr.forEach(item => {
					if (this.checkedArr.includes(item.Id)) {
						arr.push(item)
					}
				})

				this.checkedArr = [] //重置选择
				this.allChecked = false

				this.uplist = [...arr]
				this.arrErr = []
				// console.log('打印arr', arr, this.uplist)
				await this.rowsUp(this.uplist)
				await this.uploadArr()


			},
			netword() {
				uni.getNetworkType({
					success: (res) => {
						var str = ''
						if (res.networkType === 'ethernet') {
							str = '有线网络'
						} else if (res.networkType === 'unknown') {
							str = '不常见网络'
						} else if (res.networkType === 'none') {
							str = '无网络'
						}
						if (str) {
							uni.showToast({
								title: str,
								icon: "none"
							});
						} else {
							uni.showToast({

								title: res.networkType,
								icon: "none"
							});
						}
					}
				})
			},
			// 点击上传按钮事件
			async upclick() {
				console.log('this.checkedArr', this.checkedArr)
				if (this.checkedArr.length <= 0) {
					uni.showToast({
						title: '请选中后上传',
						icon: "none"
					});
					return
				}
				if (this.sizeToMb > this.StorageByte) return uni.showToast({
					title: '您的容量已用尽',
					icon: "none"
				});
				this.clickXM()
				// this.openpopup()
			},
			// 列表循环
			async rowsUp(list) {
				console.log('获取即将存循环的图片列表=====================', list)
				var arrErr = []
				for (let item of list) {
					this.$set(item, 'upstate', 3) //整个记录上传状态 0待上传 1成功 2 失败 3上传中
					item.buji = Math.floor(100 / item.imglist.length) //步级
					console.log('循环的item', item)
					// 图片循环上传
					await this.upfiel(item.imglist, item) //上传图片
					var arr = [] //上传图片完毕后  查看是否全部上传完成
					item.imglist.forEach(item => {
						if (item.progress !== '完成') {
							arr.push(item)
						}
					})
					if (arr.length > 0) { //如果有图片视频未上传完成 跳出本次循环不执行后续	
						this.$set(item, 'upstate', 2) //未全部完成 整个记录上传状态 0待上传 1成功 2 失败
						arrErr.push(item) //未完成的列
						continue
					} else { //如果图片全部上传完成  提交本次循环的列  提交接口完成后删除本地存储
						// 保存成功数据
						this.successArr.push(item)
					}
				}

				console.log('获取this.successArr', this.successArr)


			},
			// 图片上传
			async upfiel(imglist, form) {
				console.log('图片上传upfiel函数', imglist, form)
				for (let item of imglist) {
					if (item.Murl.indexOf('https') !== -1) { //本次循环的列 图片视频已经是网络图片视频 就跳出本次循环 不上传 
						continue
					}
					this.$set(item, 'progress', '上传中')
					console.log(item, '上传中')
					await uni.uploadFile({
						url: this.$ApiUrl +
							`Base_Manage/Upload/OssUploadFileByForm?ProjectId=${this.entity.xmId}&TaskId=${this.entity.rwId}`,
						// ?ObjectKey=${strFileName}
						filePath: item.Murl,
						name: 'file',
						header: {
							'Authorization': uni.getStorageSync('tokenKey')
						},
						formData: {
							fileDir: "uploads",
							fileName: item.name.substring(0, item.name
								.lastIndexOf(".")),
							storeType: 6,
						}
					}).then(async response => {
						let [error, res] = response;

						if (error) {
							this.$set(item, 'progress', '失败')
							return
						}
						let ress = JSON.parse(res.data)

						if (ress.Code === '200') {
							form.uparr = form.uparr + form.buji
							this.$set(item, 'progress', '完成')
							if (form.networdlist.length === form.imglist.length) {
								form.uparr = 100
							}
							console.log(ress.Url, '返回链接');
							console.log(form, '对象');
							console.log(item, '每一个图片');
							// #ifdef H5
							item.Murl = ress.Url
							item.FileSize = ress.FileSize
							// #endif

							// 是否删除本地文件 APP
							// #ifdef APP
							item.removeUrl = item.Murl
							item.Murl = ress.Url
							item.FileSize = ress.FileSize


							await uni.removeSavedFile({ //成功后删除本地文件 替换为网络文件
								filePath: item.removeUrl,
								complete: (resa) => {
									console.log('是否成功删除本地文件', resa)
								}
							});
							// #endif

							console.log('获取最终图片上传结果11111111111111111111111111下面', ress, item, this.formArr,
								this.successArr)
						} else {
							this.$set(item, 'progress', '失败')

						}
					})
				}
			},
			allChoose(e) { //全选
				// console.log(e)
				// let chooseItem = e.detail.value;
				// 全选
				if (!this.allChecked) {
					this.allChecked = true;
					for (let item of this.formArr) {
						console.log(String(item.Id))
						let itemVal = String(item.Id);
						if (!this.checkedArr.includes(itemVal)) {
							console.log(123)
							this.checkedArr.push(itemVal);
						}
					}
				} else {
					// 取消全选
					this.allChecked = false;
					this.checkedArr = [];
				}
				console.log(this.checkedArr)
			},
			itemvalClick(item) {
				let itemVal = String(item.Id);
				if (!this.checkedArr.includes(itemVal)) {
					this.checkedArr.push(itemVal);
				} else {
					// console.log(this.checkedArr.indexOf(itemVal))
					this.checkedArr.splice(this.checkedArr.indexOf(itemVal), 1)
				}
				if (this.checkedArr.length > 0 && this.checkedArr.length == this.formArr.length) {
					this.allChecked = true;
				} else {
					this.allChecked = false;
				}
			},
			changeCheckbox(e) {
				console.log(e)
				this.checkedArr = e.detail.value;
				// 如果选择的数组中有值，并且长度等于列表的长度，就是全选
				if (this.checkedArr.length > 0 && this.checkedArr.length == this.formArr.length) {
					this.allChecked = true;
				} else {
					this.allChecked = false;
				}
			},
			lookvideo(path) {
				this.$refs.videoView.open(path)
			},
			lookimg(img, content, index, PropData, vix, pic) { //查看图片
				// vix 父级下标
				console.log('获取this.lookImglist', this.lookImglist)
				this.$store.commit('setImageList', this.lookImglist)
				// this.$refs.ImageView.open(img, content, index, PropData, 'upload', vix)
				let idx = this.lookImglist.findIndex(item => item.Murl == pic.Murl)
				this.navShow = false
				this.currentIndex = index
				console.log(PropData, '1111111111');
				let obj = {
					imageList: this.lookImglist,
					current: idx == -1 ? 0 : idx,
					isBoolOne: false,
					isBoolTwo: true,
					type: 'upload',
					PropData: PropData,
					Content: content
				}
				console.log('获取tool传递的参数', idx, img, this.lookImglist, content, index, PropData, vix, 'pic是', pic)
				console.log(obj, 'obj');
				this.$refs.ImageView.open(obj)
				this.editObj = JSON.stringify({
					content: img,
					vix
				})
			},
			// 编辑
			editLocalFile(row, index) {
				uni.setStorageSync('editFile', JSON.stringify(row))
				uni.navigateTo({
					url: '/pages/EditPage/EditImgPage'
				})
			},
			// 单个删除文件
			delLocalFile(row) {
				if (row && row.Id) {
					uni.showModal({
						title: '提示',
						content: '此操作将删除当前记录,确认继续吗?',
						success: (val) => {
							if (val.confirm) action()
						}
					})
				} else {
					if (this.checkedArr.length <= 0) return uni.showToast({
						icon: 'none',
						title: '请选择后进行操作'
					})
					uni.showModal({
						title: '提示',
						content: '此操作将删除当前记录,确认继续吗?',
						success: (val) => {
							if (val.confirm) actionAll()
						}
					})
				}
				let action = () => {
					let idx = this.formArr.findIndex(item => item.Id == row.Id)
					if (idx !== -1) {
						this.formArr[idx].imglist.forEach(item => {
							uni.removeSavedFile({
								filePath: item.Murl
							})
						})
						this.formArr.splice(idx, 1)
						uni.setStorage({
							key: 'fromdata',
							data: JSON.stringify(this.formArr),
							complete: () => {
								this.getLocalFile()
								uni.showToast({
									icon: 'none',
									title: '操作成功'
								})
							}
						})
					}
				}
				let actionAll = () => {
					this.checkedArr.forEach(cItem => {
						let idx = this.formArr.findIndex(item => item.Id == cItem)
						if (idx !== -1) {
							this.formArr[idx].imglist.forEach(item => {
								uni.removeSavedFile({
									filePath: item.Murl
								})
							})
							this.formArr.splice(idx, 1)
						}
					})
					this.checkedArr = []
					this.allChecked = false
					uni.setStorage({
						key: 'fromdata',
						data: JSON.stringify(this.formArr),
						complete: () => {
							this.getLocalFile()
							uni.showToast({
								icon: 'none',
								title: '操作成功'
							})
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-progress {
		.uni-progress-bar {
			height: 15px !important;
		}

	}

	.video {
		width: 100%;
		height: 100%;
		background: #000;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cover {
		width: 100%;
		height: 100%;
	}

	@keyframes bgt {
		0% {
			border-color: #fff;
		}

		50% {
			border-color: #5fff5f;
		}

		100% {
			border-color: #fff;
		}
	}

	.trbgt {
		box-sizing: border-box;
		border: 2px solid #fff;
		animation-name: bgt;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

	.centerflex {
		display: flex;
		align-items: center;
	}

	.between {
		justify-content: space-between;
	}

	.mask {
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: transparent;
		top: 0;
		left: 0;
	}

	.pageRight {
		.empty {
			width: 80vw;
			margin: 0 auto;
			text-align: center;
		}

		.list {
			box-sizing: border-box;
			padding: 5px;
			padding-top: 20rpx;

			.rightItem {
				width: 90%;
				position: relative;
				display: flex;
				height: 100px;
				box-sizing: border-box;
				border: 2px solid #fff;

				.leftImage {
					width: 175rpx;
					height: 155rpx;
					padding-right: 20rpx;
				}

				.center {
					flex: 1;

					.status {

						.rep {
							text-align: right;
						}
					}

					.remark {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}

				.last {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					padding-left: 20rpx;
					position: relative;

					.select {
						position: absolute;
						top: 30rpx;
						padding: 20rpx 10rpx;
						text-align: center;
						background-color: #fff;
						border-radius: 10rpx;
						width: 100rpx;
						box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
						line-height: 2;
						z-index: 10;
					}
				}

				.audio {
					display: flex;
					align-items: center;
					margin-bottom: 10px;
				}

				.imageVideo {
					position: relative;
					padding: 5rpx;
					box-sizing: border-box;

					.p {
						position: absolute;
						right: 0;
						top: 0;
						color: red;
						z-index: 8;
					}
				}
			}
		}
	}

	.buttonGroup {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		margin-top: 28rpx;
	}

	.u-content {
		padding: 150px 60px 0;
		@include flex(column);
		align-items: center;
		justify-content: center;

		&__circle {
			background-color: $u-success;
			@include flex;
			border-radius: 100px;
			width: 60px;
			height: 60px;
			align-items: center;
			justify-content: center;
		}

		&__normal {
			font-size: 15px;
			color: $u-success;
			margin-top: 15px;
		}
	}

	.fixedBox {

		margin-bottom: 20rpx;
	}
</style>